<template>
  <div class="array-data clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">forEach</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 操作原数组<br>
            const datas = ['a','b','c']<br>
            datas.forEach(data => {<br>
                &nbsp;&nbsp;console.log(data);<br>
            })
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">map</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 返回一个新数组<br>
            const datas = ['a','b','c']<br>
            const newA = datas.map(data => {<br>
              &nbsp;&nbsp;return data; // 若无返回，则默认undefined<br>
            })
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">filter</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 返回一个过滤后得新数组<br>
            const datas = ['a','b','c']<br>
            const newA = datas.filter(data => {<br>
              &nbsp;&nbsp;return data !== 'a';<br>
            })
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">find</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 查找数据，当找到第一个符合条件时，不再执行<br>
            const datas = ['a','b','c']<br>
            const newA = datas.find(data => {<br>
              &nbsp;&nbsp;return data === 'a';<br>
            })
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">some</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 一真即真,true or false<br>
            const datas = [1,2,3]<br>
            const some = datas.find(data => {<br>
              &nbsp;&nbsp;return data > 1;<br>
            })
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">every</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 一假即假,true or false<br>
            const datas = [1,2,3]<br>
            const every = datas.every(data => {<br>
              &nbsp;&nbsp;return data > 1;<br>
            })
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">reduce</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 数组累加器，第一个参数必须要初始化<br>
            const datas = [1,2,3]<br>
            const reduceData = datas.reduce((new,data) => {<br>
              &nbsp;&nbsp;return new.push(data);<br>
            },[])
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">数组合并</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            arr = […arr1,…arr2,…arr3]
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">将字符串转为数组</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            […’hello’]  // [‘h’,’e’,’l’,’l’,’o']
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">数组去重</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            Array.from(new Set([1,1,2,2,33,'33',44,'44']))
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">查找一个值在不在数组里</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            ['a', 'b', 'c', 'd'].includes('b')<br>
            // true<br>
            ['a', 'b', 'c', 'd'].includes('b', 1)<br>
            // true<br>
            ['a', 'b', 'c', 'd'].includes('b', 2)<br>
            // false
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'ArrayData'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.array-data{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
